<template>
	<div class="flex pageview">
		<div class="topBox">
			<a href="javascript:;" class="reback" @click="reback"></a>
			<a href="javascript:;" class="checkFarm" @click="checkFarm">
				<span class="nameOv">{{ farmName || '选择' }}</span>
				<img src="/img/tranCir.png" alt="" style="margin-left: 0.1rem" />
			</a>
			<div class="title">{{ farmName || '' }}养殖数据总览</div>
			<div class="time flex flex-align-center">
				<img src="/img/dashboard/time.png" alt="" />
				<span>{{ dateTime }}</span>
			</div>
		</div>
		<div class="bottomBox flex-1 flex">
			<div class="leftbox flex flex-v">
				<!-- 实时采集数量 -->
				<div class="flex-1"><columnCount :deptId="computedId" v-if="computedId"></columnCount></div>
				<!-- 养殖规模 -->
				<div class="flex-1"><aiAlram :deptId="computedId" v-if="computedId"></aiAlram></div>
				<!-- 视频 -->
				<div class="flex-1"><videoList></videoList></div>
			</div>
			<div class="centerbox flex-1">
				<div class="topWrap"><topTotal :deptId="computedId" v-if="computedId"></topTotal></div>
				<div class="flex-1">
					<Relationship :deptId="computedId"></Relationship>
				</div>
				<div style="height: 33.33%; background: linear-gradient(-90deg, #021240 0%, #061b52 88%, rgba(4, 23, 73, 0) 100%)">
					<fend-count :deptId="computedId" v-if="computedId"></fend-count>
				</div>
			</div>
			<div class="rightbox flex flex-v">
				<!-- huo -->
				<div class="flex-1"><cost-income :deptId="computedId" v-if="computedId"></cost-income></div>
				<!-- 养殖规模 -->
				<div class="flex-1"><health :deptId="computedId" v-if="computedId"></health></div>
				<!-- 出栏数量 -->
				<div class="flex-1"><epidemic :deptId="computedId" v-if="computedId"></epidemic></div>
			</div>
		</div>
		<div class="checkBox" v-if="isCheck">
			<a-tree class="draggable-tree" @select="selectName" :tree-data="farmList" :replaceFields="replaceFields" default-expand-all />
		</div>
	</div>
</template>

<script>
/* 组件 */
import columnCount from './components/farm/columnCount.vue';
import CostIncome from './components/farm/CostIncome.vue';
import health from './components/farm/health';
import Epidemic from './components/farm/Epidemic';
import videoList from './components/leftbox/videoList.vue';
import topTotal from './components/farm/topTotal.vue';
import FendCount from './components/farm/FendCount';
import Relationship from './components/farm/Relationship';
import aiAlram from './components/farm/aiAlram';
import { bigScreenApi } from '@/api/index';

export default {
	name: 'governmentScreen',
	components: {
		videoList,

		topTotal,

		columnCount,
		CostIncome,
		health,
		Epidemic,
		FendCount,
		Relationship,
		aiAlram
	},
	data() {
		return {
			timer: '',
			dateTime: '',
			deptId: '',
			areaList: [],
			isCheck: false,
			farmList: [],
			farmName: '',

			replaceFields: { children: 'childList', title: 'xzqhmc', key: 'xzqhbm', value: 'xzqhbm' }
		};
	},
	created() {
		this.timer = null;
		this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
		this.timer = setInterval(() => {
			this.dateTime = moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss');
		}, 1000);
		this.getareaLink();
	},
	destroyed() {
		clearInterval(this.timer);
	},
	mounted() {
		window.addEventListener('resize', () => {
			//TODO
			this.resize();
		});
	},
	beforeDestroy() {
		window.removeEventListener('resize');
	},
	computed: {
		computedId() {
			// 等待 apiData 获取到数据后才返回给子组件
			if (this.deptId) {
				return this.deptId;
			} else {
				return '';
			}
		}
	},
	methods: {
		mapCheck(data) {
			console.log('=====', data);
			this.deptId = data.deptId;
			if (data.name == '中国') {
				this.areaList = ['甘肃', '湖南', '内蒙', '安徽'];
			} else {
				this.areaList = data.mapJson.data.map(item => item.name);
			}
			console.log('=====', this.areaList);
		},
		reback() {
			this.$router.back(-1);
		},
		resize() {
			window.location.reload();
		},
		checkFarm() {
			this.isCheck = !this.isCheck;
		},
		//获取树
		getareaLink() {
			this.$postAction(bigScreenApi.areaLink).then(res => {
				if (res && res.code == 1) {
					this.farmList = res.data;
					this.goThroughArray(this.farmList);
					this.getName([this.farmList[0]]);
				}
			});
		},
		// 递归循环
		async goThroughArray(arr) {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].level) {
					arr[i].disabled = true;
				}
				if (Array.isArray(arr[i].childList)) {
					// console.log(arr[i]);
					// 如果这个元素是一个数组，递归调用 goThroughArray 函数
					this.goThroughArray(arr[i].childList);
				}
				if (arr[i].farmName) {
					arr[i].xzqhbm = arr[i].xzqhbm + parseInt(Math.random(1) * 1000);
					arr[i].xzqhmc = arr[i].farmName;
				}
			}
		},
		selectName(data, e) {
			this.farmName = e.node.dataRef.xzqhmc;
			this.deptId = e.node.dataRef.deptId;
			console.log(this.farmName, this.deptId);
			this.isCheck = false;
		},
		getName(arr) {
			console.log(arr[0].xzqhmc, '1111');
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].farmName) {
					// console.log(arr[i]);
					this.farmName = arr[i].farmName;
					this.deptId = arr[i].deptId;
				}
				if (Array.isArray(arr[i].childList)) {
					// console.log(arr[i]);
					// 如果这个元素是一个数组，递归调用 goThroughArray 函数
					this.getName(arr[i].childList);
				}
			}
		}
	}
};
</script>

<style scoped lang="less">
@import './screen.less';
/deep/ .ant-tree {
	padding-left: 0.3rem;
	.ant-tree-title,
	.ant-tree-switcher-icon {
		color: #fff;
	}
	.ant-tree-title {
		font-size: 16px;
	}
}
.bottomBox {
	background: linear-gradient(90deg, #030d28 0%, #041338 72%, rgba(1, 14, 49, 0.7) 100%) !important;
}
.nameOv {
	max-width: 1.1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
